<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <title>账户中心</title>
</head>
<body>
<section style="height: 50px;">
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                        data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">账户中心</a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li><a href="#">个人认证</a></li>
                </ul>
            </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
    </nav>
    <div class="container">
        <div class="row" id="connect">
            <form method="post" action="/api/personalApproval/approve">
                <div class="form-group">
                    <label>客户端ID(模拟发送用户ID)</label>
                    <input type="text" class="form-control" name="name" id="sender">
                </div>
                <div class="form-group">
                    <label>接收客户端ID(模拟接收用户ID)</label>
                    <input type="text" class="form-control" name="name" id="receiver">
                </div>
                <button type="button" class="btn btn-primary" onclick="connect()">连接</button>
            </form>
        </div>

        <div class="row" id="personal" style="display: none;height: 800px">
            <form method="post" action="/api/personalApproval/approve">
                <div class="form-group">
                    <label>姓名</label>
                    <input type="text" class="form-control" name="name" id="name" oninput="sendChange()">
                </div>
                <div class="form-group">
                    <label>身份证</label>
                    <input type="text" class="form-control" name="idCard" id="idCard" oninput="sendChange()">
                </div>
                <button type="button" class="btn btn-primary">提交</button>
            </form>
        </div>
    </div>
</section>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/socket.io/3.0.0-rc4/socket.io.js"></script>
<script>

  var socket;

  function connect() {
    let sender = document.getElementById("sender").value
    socket = io('/', {query: "userId=" + sender});
    // 接收到对方传递过来的消息,替换input值
    socket.on('message', function (msg) {
      document.getElementById("name").value = msg['name'];
      document.getElementById("idCard").value = msg['idCard'];
      // 先移除滚动事件，防止事件来回传递
      document.removeEventListener("scroll", sendChange);
      document.documentElement.scrollTop = msg['scroll'];
      setTimeout(function () {
        document.addEventListener("scroll", sendChange)
      }, 50);
      // 重新添加回事件
    });
    document.getElementById('connect').style.display = 'none';
    document.getElementById('personal').style.display = 'block';
    document.addEventListener("scroll", sendChange)
  }

  // 发送已经更改的input值
  function sendChange() {
    let name = document.getElementById("name").value
    let idCard = document.getElementById("idCard").value
    let receiver = document.getElementById("receiver").value
    socket.emit('message', {
      receiver: receiver,
      name: name,
      idCard: idCard,
      scroll: document.documentElement.scrollTop
    });
  }

</script>
</html>
